<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/web/commons/global.jsp"%>

<div class="mod-content-items">

	<c:forEach items="${hotComments }" var="hotComment"
		varStatus="hotCommentStatus">
		<c:choose>
			<c:when test="${hotComment.status !=1 }">
				<div class="mod-content-item">
					<span class="delete">此评论已被删除</span>
				</div>
			</c:when>
			<c:otherwise>
				<div class="mod-content-item">
					<div class="user-img">
						<img src="${hotComment.user.portraitUrl }">
					</div>
					<div class="comment-info">
						<div class="user-comment">
							<span class="user-name">${hotComment.user.nickname
																	}:
							</span> <span class="comment"> ${hotComment.content
																	}
							</span>
						</div>
						<div class="comment-bars">
							<div class="time">${hotComment.showTime }</div>
							<div class="bars">
								<ul class="ul-li-horizontal">
									<li class="bar like-bar"><a href="javascript:;"> <input
											type="text" value="4,${hotComment.id },1" class="value-store"
											style="display: none;" /> <c:choose>
												<c:when test="${hotComment.praise }">
													<i class="icon-thumbs-up"></i>
												</c:when>
												<c:otherwise>
													<i class="icon-thumbs-up undertone"></i>
												</c:otherwise>
											</c:choose> <span> <c:if
													test="${hotComment.statistics.countPraise > 0
																					}">
																					${hotComment.statistics.showCountPraise }
																					</c:if>
										</span>
									</a></li>
									<li class="vertical-split-line-1"></li>
									<c:choose>
										<c:when test="${userContext.userId == hotComment.user.id }">
											<li class="bar delete-bar"><input type="text"
												value="${hotComment.id }" class="value-store"
												style="display: none;" /> <a href="javascript:;">删除</a></li>
										</c:when>
										<c:otherwise>
											<li class="bar reply-bar"><a href="javascript:;">回复</a>
												<br /> &nbsp; <i class="icon-caret-up arrow arrow-hid"></i></li>
										</c:otherwise>
									</c:choose>

									<c:if test="${userContext.userId !=  hotComment.user.id}">
										<li class="vertical-split-line-1 report-bar-split"></li>
										<li class="bar report-bar"><a href="javascript:;"
											onclick="showExpose(4,${hotComment.id })">举报</a></li>
									</c:if>

									<div class="clear-both"></div>
								</ul>
								<div class="clear-both"></div>
							</div>
							<div class="clear-both"></div>
						</div>
						<div class="reply hid">
							<div class="form-group">
								<textarea class="form-control textarea-auto-height clear-radius"
									rows="1">回复@${hotComment.user.nickname }:</textarea>
							</div>
							<div class="reply-btn-div">
								<input class="value-store" value="4,${hotComment.id }" /> <a
									href="javascript:;" class="btn btn-default btn-sm clear-radius">评&nbsp;论</a>
							</div>
							<div class="clear-both"></div>
						</div>
						<div class="vertical-spacing-10"></div>
					</div>
					<div class="clear-both"></div>
				</div>
			</c:otherwise>
		</c:choose>

		<c:if test="${not hotCommentStatus.last }">
			<div class="spit-hr-1"></div>
		</c:if>
	</c:forEach>

	<c:if test="${not empty hotComments}">
		<!--热门分割线-->
		<div class="hot-split-div">
			<div class="line-split-div-1"></div>
			<div class="line-split-content-div">
				以上为热门评论， <a href="JavaScript:;" class="more"
					onclick="getMoreHotComment()">查看更多</a>
			</div>
			<div class="line-split-div-1"></div>
			<div class="clear-both"></div>
		</div>
	</c:if>



	<c:forEach items="${comments }" var="comment" varStatus="commentStatus">
		<c:choose>
			<c:when test="${comment.status !=1 }">
				<div class="mod-content-item">
					<span class="delete">此评论已被删除</span>
				</div>
			</c:when>
			<c:otherwise>
				<div class="mod-content-item">
					<div class="user-img">
						<img src="${comment.user.portraitUrl }">
					</div>
					<div class="comment-info">
						<div class="user-comment">
							<span class="user-name">${comment.user.nickname }: </span>
							<c:if test="${comment.itemType == 4}">
								<span class="to-user-name-div"> 回复 <span
									class="to-user-name"> @${comment.comment.user.nickname }
								</span>:
								</span>
							</c:if>
							<span class="comment"> ${comment.content } </span>
						</div>
						<div class="comment-bars">
							<div class="time">${comment.showTime }</div>
							<div class="bars">
								<ul class="ul-li-horizontal">
									<li class="bar like-bar"><a href="javascript:;"> <input
											type="text" value="4,${comment.id },1" class="value-store"
											style="display: none;" /> <c:choose>
												<c:when test="${comment.praise }">
													<i class="icon-thumbs-up"></i>
												</c:when>
												<c:otherwise>
													<i class="icon-thumbs-up undertone"></i>
												</c:otherwise>
											</c:choose> <span><c:if
													test="${comment.statistics.countPraise > 0}">${comment.statistics.showCountPraise}</c:if>
										</span>
									</a></li>
									<li class="vertical-split-line-1"></li>
									<c:choose>
										<c:when test="${userContext.userId == comment.user.id }">
											<li class="bar delete-bar"><input type="text"
												value="${comment.id }" class="value-store"
												style="display: none;" /> <a href="javascript:;">删除</a></li>
										</c:when>
										<c:otherwise>
											<li class="bar reply-bar"><a href="javascript:;">回复</a>
												<br /> &nbsp; <i class="icon-caret-up arrow arrow-hid"></i></li>
										</c:otherwise>
									</c:choose>
									<c:if
										test="${comment.itemType == 4 || (comment.countChildCommentForTop > 0)}">
										<li class="vertical-split-line-1"></li>
										<li class="bar dialog-bar"><a href="javascript:;"
											onclick="showDialog(${comment.id})">查看对话</a></li>
									</c:if>
									<c:if test="${userContext.userId !=  comment.user.id}">
										<li class="vertical-split-line-1 report-bar-split"></li>
										<li class="bar report-bar"><a href="javascript:;"
											onclick="showExpose(4,${comment.id })">举报</a></li>
									</c:if>

									<div class="clear-both"></div>
								</ul>
								<div class="clear-both"></div>
							</div>
							<div class="clear-both"></div>
						</div>
						<div class="reply hid">
							<div class="form-group">
								<textarea class="form-control textarea-auto-height clear-radius"
									rows="1">回复@${comment.user.nickname }:</textarea>
							</div>
							<div class="reply-btn-div">
								<input class="value-store" value="4,${comment.id }" /> <a
									href="javascript:;" class="btn btn-default btn-sm clear-radius">评&nbsp;论</a>
							</div>
							<div class="clear-both"></div>
						</div>
						<div class="vertical-spacing-10"></div>
					</div>
					<div class="clear-both"></div>
				</div>
			</c:otherwise>
		</c:choose>
		<c:if test="${not commentStatus.last }">
			<div class="spit-hr-1"></div>
		</c:if>
	</c:forEach>
</div>




<c:if test="${not empty  enhancedCommentPagination.items}">
	<div class="vertical-spacing-20"></div>
	<div class="video-pagination-wrapper">
		<div class="content">
			<ul class="pagination page-ul">

				<c:if test="${enhancedCommentPagination.index > 1}">
					<li class="page-item"><a href="javascript:;"
						onclick="getCommentList(${param.type},1,${itemType},${itemId})">首页</a></li>
					<li class="page-item"><a href="javascript:;"
						onclick="getCommentList(${param.type},${enhancedCommentPagination.index - 1},${itemType},${itemId})">&laquo;</a></li>
				</c:if>

				<c:forEach begin="${enhancedCommentPagination.index }"
					end="${enhancedCommentPagination.index + 7}" varStatus="pageStatus">
					<c:if test="${pageStatus.index <= enhancedCommentPagination.pages}">
						<c:choose>
							<c:when test="${pageStatus.first }">
								<li class="page-item cur-page"><a href="javascript:;">${pageStatus.index }</a></li>
							</c:when>
							<c:otherwise>
								<li class="page-item"><a href="javascript:;"
									onclick="getCommentList(${param.type},${pageStatus.index },${itemType},${itemId})">${pageStatus.index }</a></li>
							</c:otherwise>
						</c:choose>

					</c:if>
				</c:forEach>

				<c:if
					test="${enhancedCommentPagination.index < enhancedCommentPagination.pages}">
					<li class="page-item"
						onclick="getCommentList(${param.type},${enhancedCommentPagination.index + 1},${itemType},${itemId})"><a
						href="javascript:;">&raquo;</a></li>
					<li class="page-item"
						onclick="getCommentList(${param.type},${enhancedCommentPagination.pages},${itemType},${itemId})"><a
						href="javascript:;">尾页</a></li>
				</c:if>

				<!-- 													<li class="page-item has-more"><a href="javascript:;">&hellip;</a></li> -->
			</ul>
		</div>
	</div>
</c:if>


<script type="text/javascript">
$(function() {
	// 删除评论监控事件
	$(
			'.mod-content-wrapper .mod-content-item .comment-info .comment-bars .bars .delete-bar')
			.click(
					function() {
						var _this = $(this);
						var _this_mod_content_item = _this
								.closest('.mod-content-item');

						var vals = _this.find('.value-store').val().split(',');
						var data = {
							id : vals[0]
						};

						deleteComment(data, _this_mod_content_item);
					});
	
	// 监控点击回复事件
	$(
			'.mod-content-wrapper .mod-content-item .comment-info .comment-bars .bars .reply-bar')
			.click(
					function() {
						var _this = $(this);
						var _this_comment_info = _this.closest('.comment-info');
						var _this_arrow = _this_comment_info.find(
								'.comment-bars').find('.arrow');
						if (!_this_arrow.is(":hidden")) { // 不是隐藏的
							_this_arrow.hide();
							_this_comment_info.find('.reply').hide();
						} else {
							_this_arrow.show();
							_this_comment_info.find('.reply').show();
						}

					});

	// 监控点赞事件
	$(
			'.mod-content-wrapper .mod-content-item .comment-info .comment-bars .bars .like-bar')
			.click(function() {
				var _this = $(this);

				var attitudeVals = _this.find('.value-store').val().split(',');
				var data = {
					itemType : attitudeVals[0],
					itemId : attitudeVals[1],
					type : attitudeVals[2]
				};

				var _this_i = _this.find('i');
				var _this_span = _this.find('span');
				if (_this_i.hasClass('undertone')) {
					dealAttitude(data, "add", _this_i, _this_span);
				} else {
					dealAttitude(data, "cancle", _this_i, _this_span);
				}

			});

	// 举报按钮隐藏展示事件
	$(
			'.mod-content-wrapper .mod-content-item .comment-info .comment-bars .bars')
			.hover(function() {
				var _this = $(this);
				_this.find('.report-bar').css('visibility', 'visible');
				_this.find('.report-bar-split').css('visibility', 'visible');
			}, function() {
				var _this = $(this);
				_this.find('.report-bar').css('visibility', 'hidden');
				_this.find('.report-bar-split').css('visibility', 'hidden');
			});

	layer.config({
		extend : [ '${baseUrl }/resources/layer-v2.4/skin/moon/style.css' ], // 加载新皮肤
		skin : 'layer-ext-moon'
	});


});

$(function() {
	/**
	 * 回复中的评论监控
	 */
	$(
			'.video-others-wrapper .video-comments .mods-wrapper .mod-content-items .mod-content-item .comment-info .reply .reply-btn-div')
			.click(
					function() {
						var _this = $(this);
						var mod_content_items = _this
								.closest('.mod-content-items');

						String
						content = $.trim(_this.closest('.reply').find(
								'.form-group textarea').val());

						var datsStrs = _this.find('.value-store').val().split(
								',');
						var data = {
							itemType : datsStrs[0],
							itemId : datsStrs[1],
							content : content
						};
						addComment(data, mod_content_items);
					});
})
</script>